<template>
  <div id="wrap" :style="{ fontSize:fontSize + 'px' }">
    <v-noticebar></v-noticebar>
    <v-header
      title="风险测试">
    </v-header>
    <v-networkerr v-if="networkState === 'offline'" v-on:reload="findQuestion"></v-networkerr>
    <div v-else>
    <div class="riskTip">
      <a style="height: 50px;line-height: 50px;">测评结果仅供参考，请结合自身情况进行选择</a>
    </div>
    <v-questioncard
      v-for="(item, idx) in riskQuestion"
      :key="idx"
      :choice="item.choice"
      :description="item.description"
      :idx="item.q"
      :isOpen="item.isOpen"
      v-on:open="open(idx)"
      v-on:selectedAnswer="selectedAnswer"
    >
    <div style="background: rgb(237, 241, 245)" v-if="idx === 6 && item.isOpen" class="otherQuestion">
      <div>
        <a>银行理财</a>
        <a>预期8%</a>
      </div>
      <div>
        <a>美国股票</a>
        <a>预期25%</a>
      </div>
    </div>
    </v-questioncard>
    <v-button
      style="margin: 20px auto;"
      title="完成"
      :active="true"
      :fontsize="10"
      @click.native="checkQuestion"
      ></v-button>
    </div>
  </div>
</template>

<script>
import plugins from '../plugins/'
import { Toast, MessageBox } from 'mint-ui'

export default {
  name: 'risk-level-question',
  data () {
    return {
      fontSize: 10,
      riskQuestion: {},
      riskAnswer: {},
      hasCache: false,
      networkState: 'online'
    }
  },
  methods: {
    checkQuestion () {
      let isOk = true
      let voidObj = []
      Object.keys(this.riskAnswer).forEach((item, idx) => {
        if (this.riskAnswer[item] === '') {
          isOk = false
          voidObj.push(item)
        }
      })
      if (!isOk) {
        Toast(`请填写问题${voidObj.join(',')}`)
        return
      }
      this.postQuestion()
    },
    postQuestion () {
      this.baseService.post('/usr/riskLevelQuestion', this.riskAnswer).then((res) => {
        Toast({
          message: '评测完成！',
          duration: 1000
        })
        setTimeout(() => {
          this.$route.query.time ? this.$router.push('/open1?time=first') : this.$router.push('/riskratings?refresh=true')
        }, 1000)
      })
    },
    findQuestion () {
      if (!this.$store.state.networkState) {
        this.$plugins.networkErr()
        this.findQuestionByCache(this.$config.cacheTime.offlineCache)
        return
      }
      this.networkState = 'online'
      window.localStorage.getItem('riskQuestion') ? this.findQuestionByCache(this.$config.cacheTime.offlineCache) : this.findQuestionByNetwork()
    },
    findQuestionByNetwork () {
      this.baseService.get('/usr/riskLevelQuestion').then((res) => {
        res.data.forEach((item, idx) => {
          res.data[idx].isOpen = false
          this.riskAnswer[item.q] = ''
        })
        this.riskQuestion = res.data
        plugins.cacheControl.setCache('riskQuestion', this.riskQuestion)
      }).catch((err) => {
        if (err === 'timeout') {
          this.$plugins.cacheControl.getCache('riskQuestion', this.$config.cacheTime.offlineCache).then((res) => {
            this.riskQuestion = res.data
          }).catch((err) => {
            this.networkState = 'offline'
          })
        }
      })
    },
    findQuestionByCache (min){
      this.$plugins.cacheControl.getCache('riskQuestion', min).then((res) => {
        this.networkState = 'online'
        res.data.forEach((item, idx) => {
          res.data[idx].isOpen = false
          this.riskAnswer[item.q] = ''
        })
        this.riskQuestion = res.data
      }).catch((err) => {
        if (!this.$store.state.networkState) this.networkState = 'offline'
        this.findQuestionByNetwork()
      })
    },
    open (key) {
      let _isOpen = this.riskQuestion[key].isOpen
      if (_isOpen) {
        this.riskQuestion[key].isOpen = false
      } else {
        plugins.loop.loop(this.riskQuestion, 'isOpen')
        this.riskQuestion[key].isOpen = !this.riskQuestion[key].isOpen
      }
    },
    selectedAnswer (body) {
      this.riskAnswer[body.idx] = body.key
      this.riskQuestion.forEach((item, idx) => {
        item.isOpen = false
      })
    }
  },
  created () {
    this.fontSize = this.fontSize * document.body.offsetWidth / 320
    this.findQuestion()
  }
}

</script>

<style lang="less" scoped>
.riskTip {
  margin-top: 50px;
  background: rgb(237, 241, 245);
  a {
    font-size: 1.2em;
    display: block;
    margin: 0 auto;
    text-align: center;
  }
}
.otherQuestion {
  display: flex;
  padding-bottom: 0.8em;
  div {
    display: flex;
    flex-direction: column;
    flex: 1;
    just-content: center;
    align-items: center;
    border: 1px solid #4d66ff;
    border-radius: 15px;
    padding: 1em;
    margin: 5px 15px 0 15px;
    font-size: 0.6em;
    a {
      display: flex;
      just-content: center;
      align-items: center;
    }
  }
}
</style>


